<template>
	<view>
		<view class="comment-wrap" v-if="list.length">
			<view class="comment-cont">
				<view class="comment-item" v-for="(item,index) of list" :key="item.id" @click="showDetail(item.id)">
					<view class="comment-item-avatar">
						<image :src="item.avatar"/>
					</view>
					<view class="comment-item-cont">
						<view class="desc">
							<view class="desc-left">
								<text class="text-1">{{item.nickname}}</text>
								<text class="text-2">{{item.create_time}}</text>
								<text class="text-3">{{item.content}}</text>
							</view>
							<view class="desc-right">
								<h-comment-like :item="item"/>
							</view>
						</view>
						<view class="comment-more" v-if="item.comments.length">
							<view :class="['comment-more-cont',item.comments.length>4?'comment-more-cont-height':'',item.isShowMore?'comment-more-cont-auto':'comment-more-cont-hidden']">
								<view v-for="(elem,index) of item.comments" :key="elem.id" style="height:35rpx;">
									<text>
										{{elem.nickname}}:{{elem.content}}
									</text>
								</view>
							</view>
							<view class="comment-more-btn" @click.stop="showMoreReply(index)" v-if="item.comments.length>4&&!item.isShowMore">
								查看全部{{item.comments.length}}条回复
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="more-btn" v-if="false">
				<view class="more-btn-cont" @click="showMoreComment">
					<text>全部展开</text>
					<text :class="isFold?'cuIcon-fold':'cuIcon-unfold'"></text>
				</view>
			</view>
			<!-- 占位底部输入框高度 -->
			<view style="height:120rpx"/>
		</view>
		<view class="dan-wrap padding-lr-sm" :style="{bottom:`${InputBottom}px`}">
			<view class="input-wrap">
				<input placeholder="输入评论内容" class="input-cont" placeholder-style="color:#999999;font-size:24rpx" :adjust-position="false" @focus="InputFocus" @blur="InputBlur" confirm-type="send" v-model="content" @confirm="handleCommit"/>
			</view>
			<view>
				<button class="cu-btn round margin-left-xs" style="height:60upx;background-color: #E24E47;color: #fff;" @click="handleCommit">
					发布
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import HCommentLike from "@/components/HCommentLike"
	export default {
		props: {
			list: {
				type: Array,
				default: () => [1, 1]
			},
			videoId:{
				type:String
			}
		},
		data() {
			return {
				isFold: false,
				InputBottom:0,
				content:""
			}
		},
		components:{
			HCommentLike
		},
		methods: {
			InputFocus(e) {
			  this.InputBottom = e.detail.height
			},
			InputBlur(e) {
			  this.InputBottom = 0
			},
			showMoreReply(index){
				let list=this.$h.utils.deepClone(this.list)
				list[index].isShowMore=true
				this.$emit("update:list", [...list])
			},
			showDetail(id) {
				this.$h.router.push({
					path:'/pages/video/commentDetail',
					params:{
						id
					}
				})
			},
			showMoreComment() {
				this.$emit("update:list", [...this.list, 1])
			},
			async handleCommit(){
				if(!this.content){
					this.$h.toast('评论不能为空')
					return
				}
				if(this.content.length<2){
					this.$h.toast('评论内容不能小于2')
					return
				}
				//检测是否授权
				if(this.checkUserInfo()){
					let query={
						video_id:this.videoId,
						content:this.content
					}
					let {code}=await this.waitingLoading(this.$h.api.videoModel.postComment,true)(query)
					if(code===1){
						this.content=""
						uni.$emit("updateComment")
					}
				}
				
			},
			scrollToTop() {
				this.$nextTick(function() {
					this.scrollTop = 0
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-wrap {
		display: flex;
		flex-direction: column;
		.comment-cont {
			display: flex;
			flex-direction: column;
			.comment-item {
				margin: 10rpx 0;
				display: flex;
				justify-content: space-between;
				&-avatar {
					width: 50rpx;
					height: 50rpx;

					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}

				&-cont {
					flex: 1;
					padding-left: 20rpx;

					.desc {
						display: flex;
						justify-content: space-between;
						color: #343436;

						&-left {
							display: flex;
							flex-direction: column;

							.text-1 {
								font-size: 24rpx;
							}

							.text-2 {
								font-size: 20rpx;
								color: #666666
							}

							.text-3 {
								font-size: 26rpx;
							}
						}
					}

					.comment-more {
						width: 100%;
						// min-height: 180rpx;
						margin-top: 10rpx;
						background: rgba(237, 237, 237, 1);
						border-radius: 10rpx;
						padding: 20rpx;

						&-cont {
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(52, 52, 54, 1);
							&-auto{
								height: auto !important;
							}
							&-hidden{
								overflow: hidden;
							}
						}
						&-cont-height {
							height:140rpx;
						}

						&-btn {
							margin-top: 6rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: rgba(226, 78, 71, 1);
						}
					}
				}
			}
		}

		//展开按钮
		.more-btn {
			display: flex;
			justify-content: center;
			align-items: center;

			&-cont {
				color: #343436;
				font-size: 24rpx;
			}
		}
	}

	//评论弹幕
	.dan-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index:20;
		height: 113rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 15rpx;

		// box-shadow:0px 8px 13px 1px rgba(51, 51, 51, 0.35);
		.input-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			height: 60upx;
			background: rgba(237, 237, 237, 1);
			border-radius: 15px;
			position: relative;

			.input-cont {
				height: 100%;
				padding-left: 20upx;
			}

		}
	}
</style>
